<template>
  <div class="page-card article-page">
    <h-query :showKey="['title']" @search="search">
      <!-- <h-tooltip slot="btn" title="接口缺少关键字筛选" /> -->
      <!-- <a-button type="primary" class="a-button-right" style="margin: 6px 0 0 0" @click="add">添加</a-button> -->
    </h-query>
    <h-table
      ref="htable"
      @init="getList"
      :config="config"
      :showHeadBgNone="false"
      :zebraStripes="false">
      <span slot="type" slot-scope="{text}">
        {{ type[text] }}
      </span>
      <span slot="weightType" slot-scope="{text}">
        {{ weightType[text] }}
      </span>
      <!--  -->
      <span slot="file" slot-scope="{text}">
        <span v-for="(item, i) in fileFormat(text)" :key="i">
          <a-tooltip :title="item.url">
            <a style="font-size: 30px" :href="item.url" target="_blank">
              <SvgIcon v-if="item.type == 'pdf'" iconClass="pdf" />
              <SvgIcon v-else-if="item.type.includes('doc')" iconClass="word" />
              <SvgIcon v-else-if="['png', 'jpg', 'jpeg', 'gif'].includes(item.type)" iconClass="image" />
              <SvgIcon v-else iconClass="file" />
            </a>
          </a-tooltip>
        </span>
      </span>
      <span slot="action" slot-scope="{record}">
        <a @click="showDetail(record)">查看详情</a>
        <a-divider type="vertical"></a-divider>
        <a @click="edit(record)">修改</a>
        <a-divider type="vertical"></a-divider>
        <a class="red" @click="remove(record)">删除</a>
      </span>
    </h-table>
    <!-- 网络安全通报 -->
    <createSafe ref="createSafe" v-model="safeShow" @submit="$refs.htable.refresh();"/>

    <!-- 网络安全通报详情 -->
    <createSafeDetail v-model="safeDetailShow" :id="safeId" />
  </div>
</template>
<script>
import { safeIntnet, deleteSafeIntnet } from '@/api/serve';
import SvgIcon from '@/components/SvgIcon';
import createSafe from '../home/action/createSafe';
import createSafeDetail from '../home/action/createSafeDetail';

export default {
  components: {
    SvgIcon,
    createSafe,
    createSafeDetail
  },
  data() {
    return {
      safeShow: false,
      safeDetailShow: false,
      safeId: '',
      config: {

        rowKey: 'id',
        bordered: true,
        dataSource: [],
        columns: [
          {
            align: 'center',
            title: '序号',
            dataIndex: 'index',
            scopedSlots: { customRender: 'index' }
          },
          {
            align: 'center',
            title: '标题',
            dataIndex: 'title',
            width: 400
          },
          {
            align: 'center',
            title: '类型',
            dataIndex: 'source'
          },
          {
            align: 'center',
            title: '通报类型',
            dataIndex: 'type'
            // scopedSlots: { customRender: 'type' }
          },
          {
            align: 'center',
            title: '发文时间',
            dataIndex: 'reaseTime'
            // scopedSlots: { customRender: 'type' }
          },
          {
            align: 'center',
            title: '发文单位',
            dataIndex: 'company'
          },
          {
            align: 'center',
            title: '事件发生单位',
            dataIndex: 'unity'
          },
          {
            align: 'center',
            title: '权重',
            dataIndex: 'weightType',
            scopedSlots: { customRender: 'weightType' }
          },
          {
            align: 'center',
            title: '通报内容',
            dataIndex: 'content',
            ellipsis: true
          }
          // {
          //   align: 'center',
          //   title: '附件',
          //   dataIndex: 'file',
          //   scopedSlots: { customRender: 'file' }
          // }
          // {
          //   align: 'center',
          //   title: '操作',
          //   dataIndex: 'action',
          //   scopedSlots: { customRender: 'action' },
          //   width: 220
          // }
        ],
        pagination: {
          total: 100
        }
      },
      form: {

      },
      selectedRowKeys: [],
      selectedRow: [],
      show: false,
      queryParams: {
        pageNo: 1,
        pageSize: 10
      },
      type: {
        0: '市级',
        1: '省级',
        2: '中央'
      },
      weightType: {
        0: '低',
        1: '中',
        2: '高'
      }
    };
  },
  computed: {
    fileFormat() {
      return function(file) {
        if (!file) return [];
        const list = file.split(',');
        return list.map(e => {
          const index = e.lastIndexOf('.');
          return {
            type: e.substring(index + 1, e.length).toLowerCase(),
            url: e
          };
        });
      };
    }
  },
  methods: {
    add() {
      this.safeShow = true;
      this.$refs.createSafe.add();
    },
    edit(record) {
      this.safeShow = true;
      this.$refs.createSafe.edit(record);
    },
    showDetail({ id }) {
      this.safeDetailShow = true;
      this.safeId = id;
    },
    getList(params) {
      if (params) Object.assign(this.queryParams, params);
      safeIntnet(this.queryParams).then(res => {
        this.config.dataSource = res.data.records;
        this.config.pagination.total = res.data.total;
      });
    },
    changeStatus({ id, status }) {
      this.$message.success(status ? '发布成功' : '下线成功');
    },
    remove({ id }) {
      const that = this;
      this.$confirm({
        title: '温馨提示',
        content: '确定要删除吗？',
        onOk() {
          deleteSafeIntnet({ id }).then(res => {
            that.$message.success('删除成功');
            that.$refs.htable.refresh(true);
          });
        }
      });
    },
    search(query) {
      Object.assign(this.queryParams, query);
      this.$refs.htable.refresh();
    },
    showMsg() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }
      this.show = true;
    },
    select({ selectedRow, selectedRowKeys }) {
      this.selectedRow = selectedRow;
      this.selectedRowKeys = selectedRowKeys;
      console.log(this.selectedRow);
    },
    deleteUser({ id }) {
      const index = this.selectedRowKeys.findIndex(e => e.id == id);
      // const indexRow = this.selectedRowKeys.findIndex(e => e.id == id);
      if (index > -1) this.selectedRowKeys.splice(index, 1);
    },
    submit() {
      if (!this.selectedRowKeys.length) {
        this.$message.error('请先选择人员');
        return;
      }

      if (!this.form.message) {
        this.$message.error('请输入短信内容');
        return;
      }
      this.show = false;
      this.$message.success('发送成功');
    }
  }
};
</script>
<style lang="less" scoped>
.article-page {
  // .a-button-blue {
  //   position: absolute;
  //   right: 0;
  //   top: 0;
  // }
}
</style>
